<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ngDraggable</title>
    <link rel="stylesheet" href="../dist/echarts.min.css">
    <script src="../dist/echarts.min.js"></script>
    <script src="../app/draggable/draggable.min.js"></script>
    <script>
        var app = angular.module('app',['ngDraggable']);
        app.controller('indexController',['$scope',function ($scope) {

            $scope.array1 = [1,2,3,4,5,6,7,8,9,10];
            //重新排序
            $scope.dropComplete1 = function(index, obj) {
                var idx = $scope.array1.indexOf(obj);
                $scope.array1.splice(idx, 1);
                $scope.array1.splice(index, 0, obj);
            }

            $scope.array2 = [1,2,3,4,5,6,7,8,9,10];
            //拖拽交换
            $scope.dropComplete2 = function(index, obj){
                var idx = $scope.array2.indexOf(obj);
                $scope.array2[idx] = $scope.array2[index];
                $scope.array2[index] = obj;
            };
        }]);

    </script>
</head>
<body ng-app="app">
    <h1 class="container text-center">Hello ngDraggable!</h1>
    <div ng-controller="indexController" class="row">
        <!--重新排序-->
        <table class="col-md-offset-2 col-md-4">
            <tbody>
                <tr style="height: 36px;" ng-repeat="item in array1" ng-drop="true" ng-drop-success="dropComplete1($index,$data)">
                    <td ng-drag="true" ng-drag-data="item" ng-bind="item"></td>
                    <td ng-bind="item"></td>
                </tr>
            </tbody>
        </table>

        <!--拖拽交换-->
        <table class="col-md-4">
        <tbody>
        <tr style="height: 36px;" ng-repeat="item in array2" ng-drop="true"  ng-drag="true" ng-drag-data="item"
            ng-drop-success="dropComplete2($index,$data)">
            <td ng-bind="item"></td>
            <td ng-bind="item"></td>
            <td ng-bind="item"></td>
        </tr>
        </tbody>
        </table>

    </div>
</body>
</html>